<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #main {
        width: 100px;
        height: 100px;
        background-color: blue;
        display: none;
    }
     pre {
        display: block;
        padding: 14px;
        margin: 0 0 18px;
        line-height: 16px;
        font-size: 11px;
        border: 1px solid #d9d9d9;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    code {
        color: rgba(0, 0, 0, 0.75);
        padding: 1px 3px;
        font-size: 12px;
        border-radius: 3px;
    }
    </style>
    <script>
    window.onload = function(argument) {
        var omain = document.getElementById('main');
        var obtn = document.getElementsByTagName('input')[0];
        obtn.onclick = function() {
            omain.style.display = 'block';
            event.cancelBubble = true;
        }
        document.onclick = function(argument) {
            omain.style.display = 'none';
        }
    }
    </script>
</head>

<body>
    <div>关于时间冒泡和取消</div>
    <pre><code class="lang-javascript">obtn.onclick=function (event) {
        omain.style.display='block';    
        event.cancelBubble=true;
    }</code></pre>
    <input type="button" value="显示">
    <div id="main">点击页面可以隐藏div</div>
</body>

</html>
